<template>
	<view>
		<scroll-view class="sidebar" scroll-y="true">
			<el-input
				placeholder="输入关键字进行过滤"
				v-model="filterText">
			</el-input>
			<el-tree
				class="filter-tree"
				:data="initNode"
				:props="defaultProps"
				default-expand-all
				:filter-node-method="filterNode"
				@node-click="handleNodeClick"
				ref="tree">
				<span class="custom-tree-node"  slot-scope="{ node, data }">
				  <el-tooltip class="item" effect="light"  placement="right" v-if="!data.children">
						<div slot="content" class="tooltip">
							课程介绍：{{data.comment}} {{data.credit}}学分
							{{data.exam}}
							<p v-if="data.prerequisite_name && data.prerequisite_name!=''">
								先修课程：{{data.prerequisite_name}}
							</p>
						</div>
						<span>{{ node.label }}</span>
				  </el-tooltip>
					<span v-else>{{ node.label }}</span>
				</span>
			</el-tree>
		</scroll-view>
	</view>
</template>

<script>
export default {
	props:{
		initNode:Array
	},
	data() {
	  return {
	    filterText: '',
	    defaultProps: {
	      children: 'children',
	      label: 'label'
	    }
	  };
	},
	
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val);
		}
	},
	
	
	
	methods: {
		filterNode(value, data) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},
		handleNodeClick(data) {
			if(typeof(data.id) == "string" ){
				this.$emit('changeCourse',data.id)
			}
		},
		
	}
};
</script>

<style scoped>
.sidebar {
/* 	position: fixed;
	top: var(--top-window-height); */
	width: 240px;
	height: calc(100vh - (var(--top-window-height)));
	box-sizing: border-box;
	border-right: 1px solid darken($left-window-bg-color, 8%);
	background-color: $left-window-bg-color;
	padding-bottom: 10px;
}
.tooltip{
	width: 240px;
	text-overflow: ellipsis;
	white-space: normal;
	vertical-align: middle;
	display: inline-block;
}
</style>
